<*****护网演练*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
		<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :nodownloadReports="1">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData" :configAddress="configAddress" :configInstruction="configInstruction"  :showFooter="configReportFooter"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div id="ccuracyRate" class="chart" style="height:40%;"></div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">排行总榜</h4>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in drillPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">演练数据</h4>
					<Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
	//import echarts from 'echarts'
	import HighCharts from 'highcharts'
	import highchartsMore from 'highcharts/highcharts-more';
	import * as SeriesLabel from 'highcharts/modules/series-label';
	import mixin from "@/components/report/mixinFun.js"
	import encryption from "@/libs/encryption.js";
	//接口
	import {getArchiveDeatil} from '@/api/experimenterTrack'
	//组件
	import reportHeader from "@/components/report/reportHeader.vue"
	import cover from "@/components/report/cover.vue"
	import page from "@/components/report/page.vue"
	export default {
		name: 'examReport',
		components: {
			page,
			cover,
			reportHeader
		},
		mixins: [mixin],
		data() {
			return {
				reportCol: [{
					key: 'rank',
					title: '排名',
					per: 0.25
				}, {
					key: 'teamName',
					title: '团队名称',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.25
				}, {
					key: 'totalCount',
					title: '审核通过次数',
					per: 0.25
				}],
				reportInfo: {},
				sceneId: this.$route.query.id,
				scale: 1,
				fontSize: 14,
				disSub: false,
				rankList: [],
				rankListPageNumArr: [],
				disDownloadReport: true,
				drillTableList:[],
				drillPageNumArr:[],
				drillCol:[],
			}
		},
		watch: {

		},
		filters: {

		},
		computed: {
			coverData: function() {
				let {
					startTime,
					endTime,
					userCount,
					creatorName,
					teamCount
				} = this.reportInfo;
				return [{
					value: startTime,
					title: '开始时间'
				}, {
					value: endTime,
					title: '结束时间'
				}, {
					value: creatorName,
					title: '创建者'
				}, {
					value: (teamCount || 0) + '个',
					title: '参赛团队'
				}, {
					value: (userCount || 0) + '人',
					title: '参赛人数'
				}, ]
			},
		},
		mounted() {
			this.setStyle();
			this.getArchiveDeatil();
			window.onresize = () => {
				this.disDownloadReport = true;
				this.setStyle();
			}
				// this.competDrillTableTeamStatistics() // 找不到这个方法，所以注释
		},
		beforeDestroy() {

		},
		methods: {
            getArchiveDeatil(){
                getArchiveDeatil(this.$route.query.id).then(res=>{
                    if(res.code==1){
                        let content=res.data.content
                        content=JSON.parse(content)
                        this.reportInfo=content.reportInfo
                        this.rankListPageNumArr=content.rankListPageNumArr
                        this.drillPageNumArr=content.drillPageNumArr
                        this.generateReport()
                        this.initCol()
                    }else{
                        this.$Message.warning(res.message)
                    }
                })
            },
			setStyle() {
				let width = (window.innerHtml || document.documentElement.clientWidth);
				this.fontSize = width / 1519 * 14;
				if(this.fontSize < 10) {
					this.fontSize = 10;
				}
				this.setPageMargin();
				this.getRankPage();
			},
				getTablePage() {
				this.initCol();
				if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
			},
			initCol() {
                this.drillCol = [
                    {
                    type: 'index',
                    width: 30,
                    title: '排名',
                    align: 'center'
                },{
                    key: 'teamName',
                    title: '团队名称',
                    width: 40
                }, {
                    key: 'spendTime',
                    title: '演练时长',
                    per: 0.15
                }, {
                    key: 'missionNum',
                    title: '演练总任务数',
                    width: 0.1
                }, {
                    key: 'teamAttackNum',
                    title: '团队攻击总数',
                    width: 0.15
                },{
                    key: 'teamFinishMissionNum',
                    title: '团队有效攻击次数',
                    per: 0.15
                }, {
                    key: 'rightAttackPercent',
                    title: '有效攻击指数',
                    per: 0.15
                }, {
                    key: 'attackPercent',
                    title: '攻击指数',
                    per: 0.15
                },{
                    key: 'threatPercent',
                    title: '威胁指数',
                    per: 0.2			}];
            },
			initReportCol() {
				this.reportCol = [{
					key: 'rank',
					title: '排名',
					per: 0.25
				}, {
					key: 'teamName',
					title: '团队名称',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.25
				}, {
					key: 'totalCount',
					title: '审核通过次数',
					per: 0.25
				}];
			},
			getRankPage() {
				this.initReportCol();
				if(this.rankList.length > 0) {
					this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
				});
			},
			//生成报告
			generateReport() {
						this.getRankPage();
						this.$nextTick(() => {
							this.drawChart();
						});
			},
			drawChart() {
				// 
				let _this = this;
				let users = [];
				let categorys = [];
				if(_this.reportInfo.rankList.length <= 0) {
					return
				}
				HighCharts.chart('ccuracyRate', {
					chart: {
						type: 'column',
						backgroundColor: 'transparent',
					},
					title: {
						text: '靶标区域统计',
						align: 'left',
						//				x:this.fontSize * 0.2,
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						enabled: false,
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						categories: this.reportInfo.statistics.map(item => item.district),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
						crosshair: true
					},
					yAxis: {
						min: 0,
						title: {
							text: ''
						},
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					tooltip: {
						// head + 每个 point + footer 拼接成完整的 table
						headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
						pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
							'<td style="padding:0"><b>{point.y}个 </b></td></tr>',
						footerFormat: '</table>',
						shared: true,
						useHTML: true
					},
					plotOptions: {
						column: {
							borderWidth: 0,
							maxPointWidth: 15
						}
					},
					series: [{
						name: '靶标数',
						data: this.reportInfo.statistics.map(item => item.count)
							//				color: '#2f70ff',
					}],
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
				});
				return
				let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '得分趋势统计',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: _this.reportInfo.rankList[0].scoreVO.map(score => score.scoreDate.split(" ")[1]),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
						title: {
							text: '得分'
						},
					},
					series: _this.reportInfo.rankList.map(user => {
						return {
							name: user.teamName,
							//type:'line',
							data: user.scoreVO.map(score => score.score)
						}
					}),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
				SeriesLabel(HighCharts);
				HighCharts.chart('scoreAnalysis', scoreOptione);
			},
			zoomIn() {
				if(this.scale == 0.5) {
					return
				}
				this.scale = this.accSub(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize - 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
			},
			zoomOut() {
				if(this.scale == 3) {
					return
				}
				this.scale = this.accAdd(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize + 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
			}
		},
		destroyed() {

		}
	}
</script>

<style scoped src="@/components/report/report.css">
	
</style>